<template>
  <div class="container-table">
    <div class="title">学员列表</div>
    <div class="table-header">       
            <ul>
                <li>用户ID</li>
                <li>微信昵称</li>
                <li>会员手机</li>
                <li>消费金额</li>
                <li>订单数量</li>
                <li>会员等级</li>
                <li>上次消费时间</li>
                <li>禁用账户</li>
                <li style="display:none">是否禁用</li>
                <li>操作</li>
            </ul>     
    </div>
    <div class="table-body">       
            <ul>
                <li v-for="(item) in arr" :key="item.id">
                    <input type="checkbox" v-model="checked" :value="item.id" >
                    <span>{{item.userId}}</span>
                    <span>{{item.name}}</span>
                    <span>{{item.tel}}</span>
                    <span>¥{{item.money}}</span>
                    <span>{{item.num}}</span>
                    <span>{{item.level}}</span>
                    <span>{{item.date}}</span>
                    <span>
                        <el-switch
                       v-model="item.state"
                       active-color="#ea1a41"
                       inactive-color="#b5b5b5"                      
                       >
                    </el-switch>
                    </span>
                    <span style="display:none">{{item.state}}</span>
                    <el-button type="primary" @click="editorHandle(item)">编辑</el-button>
                    <el-button type="info" @click="handleDelete(item.id)">删除</el-button>                    
                </li>
            </ul>     
    </div>
  </div>
</template>

<script>
import {deleteTableApi,deleteManyByIdApi} from '../../../api/ljjApi'
import eventBus from '../../../untial/evevtBus'
export default {
  props:['arr'],
  data() {
      return {
        checked:[],
      }
    },
    mounted() {
      eventBus.$on('deleteAllTable',this.deleteTable)
      eventBus.$on('checkAllFun',this.checkAllFun)
      eventBus.$on('empty',this.empty)
    },

  methods: {
    empty(){
         this.checked=[]
    },
    checkAllFun(msg){
      // console.log("msg",msg);
      if(msg){
        this.checked = this.arr.map(item=>item.id)
       
      }else{
        this.checked=[]
      }
    },
    
    //编辑
    editorHandle(item){
      console.log('item',item);
      this.$emit('updateOpenDialog',item)

    },

    //多删
    deleteTable(){
       console.log(this.checked);
       deleteManyByIdApi({ids:this.checked}).then(res=>{
        console.log('res',res);
        if(res.code==200){
          this.$emit('resetArr')
        }
       })
    },
    //单删
      handleDelete(id){       
        //逻辑:发送请求把id给后端,后端删除数据,前端刷新页面
        deleteTableApi({id:id}).then(res=>{
          console.log('res',res);
          if(res.code==200){
            this.$emit('resetArr')
          }
          
        })
      }
    }

}
</script>

<style lang="less" scoped>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,
kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,
thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,
video{
    box-sizing: border-box;
}
.title{
    height: 52px;
    background: rgba(255,255,255,0.4);
    padding: 18px 30px;
    color: #333333;
    font-size:16px;
    font-weight: bold;
}
.table-header{
    background: rgba(255,255,255,0.4);
    height: 42px;
    padding: 14px 0 12px 74px;
    ul{
        display: flex;
        color: #333333;
        font-size: 16px;
        font-weight: bold;
        li{
           margin-right: 66px; 
           &+li{
            margin-right: 78px;
            &+li{
            margin-right: 52px;
            &+li{
            margin-right: 40px;
            &+li{
            margin-right: 40px;           
            &+li{
            margin-right: 50px;
            &+li{
            margin-right: 68px;
            &+li{
            margin-right: 102px;
            &+li{
            margin-right: 90px;
           }
           }
           }
           }
           }
           }
           }
           }
        }
    }
}
.table-body{
    ul{
        background: rgba(255,255,255,0.2);
        li{
            display: flex;
            align-items: center;
            border-bottom:1px solid #eef1f5;
            height: 40px;
            line-height: 40px;
            &:hover{
              background: #b6d5f1;
            }
            input{
                margin-left: 38px;
                margin-right: 18px;
            }
            .el-button--primary{
                padding: 6px 14px;
            }
            .el-button--info{
                padding: 6px 14px;
            }
        }
         span{
           display: inline-block;
           width: 50px;
           margin-right: 40px; 
           font-size: 14px;
           &+span{
            width: 150px;
            margin-right: 5px;
            &+span{
            width: 100px;
            margin-right: 50px;
            &+span{
            width: 50px;
            margin-right: 70px;
            &+span{
            width: 50px;
            margin-right: 50px;           
            &+span{
            width: 50px;
            margin-right: 12px;
            &+span{
            width: 200px;
            margin-right: 0px;
            &+span{
            width: 80px;
            margin-right: 34px;
           }
           }
           }
           }
           }
           }
           }
        }
    }
}
</style>